<template>
	<div :style="{height:wh}" class="second">
		<div :style="scale.title" class="title">
			<div class="a">
				数据权威，智能分析
			</div>
			<div class="b">
				大数据和云计算设计精准推荐
			</div>
		</div>
		<div :style="scale.base" :class="{active:active}" class="container">
			<img class="box" src="./images/Iphone.png" alt="" />
			<img @click="ochange" :class="[i[0]]" src="./images/one.png" alt="" />
			<img @click="ochange" :class="[i[1]]" src="./images/two.png" alt="" />
			<img @click="ochange" :class="[i[2]]" src="./images/three.png" alt="" />
		</div>
	</div>
</template>

<script>
	import scale from "@/modules/scale"
	import time from "@/modules/time"
	var change=time.change;
	export default {
		name:'secondPage',
		data(){
			return {
				i:['a','b','c'],
				active:!1,
				wh:window.innerHeight
			}
		},
		computed:{
			scale:require('@/modules/base').scale
		},
		watch:{
			active(){
				var that=this;
			}
		},
		methods:{
			ochange(e){
				var o=e.target.className;
				if(o=='a'){
					this.i.push(this.i.shift())
				}else if(o=='c'){
					this.i.unshift(this.i.pop())
				}else if(o=='b'){
					if(this.active==!0){
						this.active=!1
					}else{
						this.active=!0
					}
				}
			}
		},
		mounted(){
			var that=this;
//			change(function(){
//				if(that.active==!1){
//					that.i.unshift(that.i.pop())
//				}
//			})
		}
	}
</script>

<style lang="less" scoped>
@wbox:190px;
	.second{
		background:#fff;
		height:100%;
		.title{
			.a{
				height:50%;
				line-height: 1.5em;
				font-size:26px;
				font-weight:600;
				vertical-align: baseline;
			}
			.b{
				height:50%;
				font-size:18px;
			}
		}
		.container.active{
			.b{
			}
		}
		.container{
			position:relative;
			img{
				left:0;
				right:0;
				position:absolute;
				width:152px;
				transition:.2s all;
				transition-timing-function:linear;
				margin:auto;
			}
			img.a,img.b,img.c{
				top:50px;
				bottom:50px;
			}
			.a{
				transform:translateX(-110px);
			}
			.c{
				transform:translateX(110px);
			}
			.b{
				transform:translateX(0px);
				z-index: 3;
			}
			.box{
				margin:auto;
				width:@wbox;
				z-index:2;
				top:0;
				bottom:0;
			}
		}
	}
</style>